<template>
  <PageView
      :scrollable="false"
      ref="pageViewRef"
      :layout-vars="{showFooter:total>0}"
  >
    <template v-slot:default="{contentHeight}">
      <el-table
          :height="contentHeight"
          :data="tableData"
          :summary-method="getSummaries"
          show-summary
          border
      >
        <el-table-column label="序号" width="100" type="index" align="center" />
        <el-table-column
            prop="name"
            label="转账来自"
            align="center"
        >
          <template v-slot="scope">
            <div class="link-type" @click="nameClicked">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="city"
            label="用户工作地"
            align="center"
        />
        <el-table-column
            prop="time"
            label="转账时间"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="money"
            label="金额"
            align="center"
        >
        </el-table-column>
      </el-table>
    </template>
    <template v-slot:footer>
      <div class="app-section-footer">
        <Pagination
            v-show="total>0"
            :total="total"
            :currentPage="queryParams.pageNum"
            @pagination="getList"
        />
      </div>
    </template>
  </PageView>
</template>

<script setup>
// 获取表格金额一栏合计金额 当方法不需要干涉其他业务 可以放在setup里面来实现
// 此时方法变成了一个变量
const getSummaries = (param) => {
  console.log('param:', param)
  // columns表格列数据 data表格数据
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }

    // 遍历表格行数据源 筛选出数据属性的
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      // 每一项都为数据
      sums[index] = `¥ ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      // 有一项不是数据类型 则不计算
      sums[index] = 'N/A'
    }
  })
  return sums;
}
</script>

<script>
import PageView from "@/components/Page/page-view";
export default {
  name: "Income",
  components:{
    PageView
  },
  props:{

  },
  data() {
    return {
      tableData:[],

      total:0,

      queryParams:{
        pageNum:1,
      },
    }
  },
  mounted() {
    this.getList()
  },
  methods:{
    getList() {
      let arr = [
        {
          name:"陈",
          city:'沈阳',
          time:'2023-10-20 11:57',
          money:'25.00'
        },
        {
          name:"周建伟",
          city:'沈阳',
          time:'2023-10-19 14:54',
          money:'30.00'
        },
        {
          name:"Latty、起风了、温不胜",
          city:'成都',
          time:'2023-10-08 20:08',
          money:'100.00'
        },
        {
          name:"周建伟",
          city:'沈阳',
          time:'2023-09-21 10:33',
          money:'20.00'
        },
        {
          name:"坤哥",
          city:'成都',
          time:'2023-09-11 14:07',
          money:'45.00'
        },
        {
          name:"温不胜",
          city:'武汉',
          time:'2023-09-10 13:59',
          money:'88.00'
        },
        {
          name:"何以解忧",
          city:'杭州',
          time:'2023-09-09 13:56',
          money:'45.00'
        },
        {
          name:"李森森",
          city:'杭州',
          time:'2023-08-30 17:56',
          money:'30.00'
        },
        {
          name:"wE",
          city:'杭州',
          time:'2023-08-29 16:22',
          money:'20.00'
        },
        {
          name:"wE",
          city:'杭州',
          time:'2023-08-28 22:12',
          money:'292.00'
        },
        {
          name:"赫赫",
          city:'青岛',
          time:'2023-08-19 15:56',
          money:'20.00'
        },
        {
          name:"森森",
          city:'青岛',
          time:'2023-08-18 10:54',
          money:'20.00'
        },
        {
          name:"lucky",
          city:'深圳',
          time:'2023-08-16 09:54',
          money:'20.00'
        },
        {
          name:"呵呵",
          city:'深圳',
          time:'2023-08-11 19:33',
          money:'15.00'
        },
        {
          name:"呵呵",
          city:'深圳',
          time:'2023-08-11 14:46',
          money:'15.00'
        },
        {
          name:"呵呵",
          city:'深圳',
          time:'2023-08-07 13:53',
          money:'15.00'
        },
        {
          name:"呵呵",
          city:'深圳',
          time:'2023-08-07 12:27',
          money:'25.00'
        },
        {
          name:"张良军",
          city:'深圳',
          time:'2023-08-06 20:19',
          money:'400.00'
        },
        {
          name:"呵呵",
          city:'深圳',
          time:'2023-08-05 18:59',
          money:'30.00'
        },
        {
          name:"呵呵",
          city:'深圳',
          time:'2023-08-05 11:58',
          money:'88.00'
        },
        {
          name:"呵呵",
          city:'深圳',
          time:'2023-08-03 10:23',
          money:'66.00'
        },
        {
          name:"山阳",
          city:'武汉',
          time:'2023-07-25 15:20',
          money:'30.00'
        },
        {
          name:"山阳",
          city:'武汉',
          time:'2023-07-24 13:51',
          money:'30.00'
        },
        {
          name:"森林",
          city:'青岛',
          time:'2023-07-16 19:44',
          money:'20.00'
        },
        {
          name:"森林",
          city:'青岛',
          time:'2023-07-13 19:54',
          money:'20.00'
        },
        {
          name:"森林",
          city:'青岛',
          time:'2023-07-04 22:28',
          money:'85.00'
        },
        {
          name:"森林",
          city:'青岛',
          time:'2023-07-04 18:58',
          money:'65.00'
        },
        {
          name:"森林",
          city:'青岛',
          time:'2023-07-03 19:04',
          money:'20.00'
        },
        {
          name:"森林",
          city:'青岛',
          time:'2023-06-19 09:47',
          money:'200.00'
        },
        {
          name:"森林",
          city:'青岛',
          time:'2023-06-15 18:59',
          money:'20.00'
        },
        {
          name:"杰杰",
          city:'郑州',
          time:'2023-06-02 09:21',
          money:'30.00'
        },
        {
          name:"杰杰",
          city:'郑州',
          time:'2023-05-29 11:51',
          money:'50.00'
        },
        {
          name:"杰杰",
          city:'郑州',
          time:'2023-05-25 16:23',
          money:'50.00'
        },
      ]
      this.total = arr.length
      this.tableData = arr

      this.certificateImage = process.env.VUE_APP_BASE_TEST_API + '/1.pdf'
    },

    // getSummaries(param) {
    //   console.log('param:', param)
    //   const { columns, data } = param
    //   const sums = []
    //   columns.forEach((column, index) => {
    //     if (index === 0) {
    //       sums[index] = 'Total Cost'
    //       return
    //     }
    //     const values = data.map((item) => Number(item[column.property]))
    //     if (!values.every((value) => Number.isNaN(value))) {
    //       sums[index] = `$ ${values.reduce((prev, curr) => {
    //         const value = Number(curr)
    //         if (!Number.isNaN(value)) {
    //           return prev + curr
    //         } else {
    //           return prev
    //         }
    //       }, 0)}`
    //     } else {
    //       sums[index] = 'N/A'
    //     }
    //   })
    //   return sums;
    // },

    /**
     * 姓名点击事件
     */
    nameClicked() {

    }
  },
}
</script>

<style scoped>

</style>
